import {useNavigate} from 'react-router-dom'
import Logo from '../../components/Logo/'
import {
     Radio,
    Input,
    Form,
    Button,
    Space,
    NavBar,
    Dialog
} from 'antd-mobile'
import React from 'react'  
import Cookies from 'js-cookie' 
import {reqRegister} from '../../api/'
export default  function Register (){
    // const [userName, setUserName] =React.useState('')
    const [passWord, setPassWord] = React.useState('')
     //const [conPassWord, setConPassWord] = React.useState('')
    // const [userType, setUserType] = React.useState('')
    const [form] = Form.useForm();
    const navigate= useNavigate()
    //跳转路由
    const go=()=>{
        navigate('/login',{replace:true})
    }
    // 注册
    const register=async()=>{
        try {
            const values = await form.validateFields();
            const{username,password,type}=values
            const response=await reqRegister({username,password,type});
            console.log(response);
            if(!response.code){
                Cookies.set('userId',response.data._id)
                navigate('/main',{replace:true})
            }else{
                Dialog.alert({
                    title:'注册失败',
                    content:response.msg
                })
            }
          } catch (error) {
            error.errorFields.forEach(({ name,errors })=> {
                console.log(name,errors)
            });
          }
    }

    //获取密码
   const getPassWord=(value)=>{
        setPassWord(value);
    }
    return(
        <div>
            <NavBar children="注册" backArrow={false}  className="navbar"></NavBar>
            <div style={{marginTop:'50px'}}>
            <Logo/>
            <Space block={true} justify="center">
                    <Form
                    form={form}
                    layout='horizontal'
                    footer={
                        <Space direction='vertical' block={true}>
                            <Button block type='submit'  size='large' color='primary' onClick={register}>
                            注册
                            </Button>
                            <Button block type='submit'  size='large' onClick={go}>
                               已注册
                            </Button>    
                        </Space>
                    }
                    initialValues={{'userType':'seeker'}}
                    >
                        <Form.Item
                            name='username'
                            label='用户名：'
                            rules={[{ required: true, message: '姓名不能为空' },{max:12,message:'字符需要6-12位'},{min:6,message:'字符需要6-12位'}]}
                        >
                            <Input  placeholder='请输入姓名'  />
                        </Form.Item>
                        <Form.Item name='password' label='密&nbsp;&nbsp;&nbsp;码：'
                            rules={[{ required: true, message: '密码不能为空' }]}
                        >
                            <Input  placeholder='请输入密码' type="password" onChange={getPassWord}   />
                        </Form.Item>
                        <Form.Item name='conPassword' label='确认密码：'
                            rules={[{pattern:new RegExp(passWord),message:'密码不一致'}]}
                        >
                            <Input  placeholder='请确认密码'  type='password' />
                        </Form.Item>
                        <Form.Item name='type' label='用户类型'
                        >
                            <Radio.Group  > 
                                <Radio value="dashen">大神</Radio>&nbsp;&nbsp;&nbsp;
                                <Radio value="laoban">老板</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </Space>
            </div>
        </div>
    )
} 
    

